<template>
  <div class="work-calendar">
    <div class="box">
      <el-select v-model="year" @change="change">
        <el-option
          v-for="(item, index) in yearArr"
          :key="index"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-select v-model="month" @change="change">
        <el-option
          v-for="item in 12"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </div>
    <el-calendar v-model="mytime">
      <template slot="dateCell" slot-scope="{ date }">
        <span>{{ date | mydays }}</span>
        <span class="xiu" :class="{ hidden: isWeek(date) }">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  props: {
    mydate: {
      type: Date, // 传入的 myDate 必须是日期对象
      default: function () {
        // 如果不传日期，会得到一个默认时间对象
        return new Date()
      }
    }
  },
  watch: {
    // 侦听日期，得到年月
    mydate: {
      handler: function () {
        // 得到当前时间对象
        var time = new Date(this.mydate)
        // 得到年
        var _year = time.getFullYear()
        // 得到月
        var _month = time.getMonth()
        // 赋值年月
        this.year = _year
        this.month = _month + 1
        // 得到年份的数组
        for (var i = _year - 5; i <= _year + 5; i++) {
          this.yearArr.push(i)
        }
        // 将当前时间赋值给 mytime
        this.mytime = time
      },
      immediate: true
    }
  },
  filters: {
    // 得到当前天日期的 day
    mydays: function (value) {
      // 得到天数
      const time = new Date(value)
      // 得到天数
      return time.getDate()
    }
  },
  data () {
    return {
      mytime: '', // 日历组件中的时间
      year: '', // 当前年
      month: '', // 当前月
      yearArr: [] // 年份的数组
    }
  },
  methods: {
    // 选中的日期改变之后，会触发的时间
    change () {
      // 只要年月发生改变，就需要重新设置日历组件中的时间
      // 得到一个新的时间（新的时间应该根据选中的年月来）
      // 判断是否是本月
      const _time = new Date()
      // 得到本年
      const _year = _time.getFullYear()
      // 得到本月
      const _month = _time.getMonth() + 1
      if (this.year === _year && this.month === _month) {
        this.mytime = _time
      } else {
        this.mytime = new Date(`${this.year}/${this.month}/1`)
      }
    },
    // 判断是否是周末
    isWeek: function (value) {
      // 判断 value 是否是周末
      const time = new Date(value)
      // 得到选中的年
      const timeyear = time.getFullYear()
      // 得到选中的月
      const timeMonth = time.getMonth() + 1
      // 得到一周中的天数
      const day = time.getDay()
      // 判断是否是本月
      if (timeyear === this.year && timeMonth === this.month) {
        // 判断是否是 6 & 0
        if (day === 6 || day === 0) {
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss">
.work-calendar {
  .el-calendar__header {
    display: none;
  }
  .box {
    text-align: right;
  }
  input.el-input__inner {
    font-size: 12px;
    width: 100px;
    height: 30px;
  }
  i.el-select__caret.el-input__icon.el-icon-arrow-up {
    height: 30px;
    line-height: 30px;
  }
  .el-calendar-table {
    th {
      font-weight: 700;
      font-size: 14px;
      &:nth-child(6),
      &:nth-child(7) {
        color: #ff4500;
      }
    }
    .el-calendar-day {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      font-size: 12px;
    }
    .prev,
    .current,
    .next {
      border: none;
    }
  }
  .xiu {
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    background-color: #fa7c4d;
    color: #fff;
    border-radius: 50%;
    margin-left: 6px;
  }
  .hidden {
    display: none;
  }
  .is-today {
    .el-calendar-day {
      span:first-child {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: red;
        color: #fff;
        text-align: center;
        line-height: 16px;
      }
    }
  }
}
</style>
